<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>bootstrap Demo</title>
  <link rel="stylesheet" href="./styles/bootstrap.min.css">
  <link rel="stylesheet" href="./styles/bootstrap-datetimepicker.min.css">
  <link rel="stylesheet" href="./styles/font-awesome.min.css">
  <link rel="stylesheet" href="./styles/statisticalData.css">
</head>

<body>
<!-- 导航go -->
<div class="all_nav navbar navbar-default navbar-fixed-top" id="navbar" role="navigation">
  <div class="container">
    <div class="col-md-2">
      <a href="javascript: void(0);">HeiKiz</a>
    </div>
    <div class="col-md-8">
      <ul class="nav_show nav navbar-nav">
        <li>
          <a href="./index.html">首页</a>
        </li>
        <li>
          <a href="./servar_aboutServer.html">服务商管理</a>
        </li>
        <li>
          <a href="./institution_aboutInstitution.html">机构管理</a>
        </li>
        <li>
          <a href="./teacher_teacherIndex.html">师训管理</a>
        </li>
        <li>
          <a href="./order_orderManagement.html">订单管理</a>
        </li>
        <li>
          <a class="nav_choose" href="./data_statisticalData.html">数据统计</a>
        </li>
      </ul>
    </div>
    <div class="use_info col-md-2">
      <a href="javascript: void(0);" id="dropdownMenu1" data-toggle="dropdown">
        <img class="user_img" src="./images/timg.jpg">
        <p class="user_name">开心麻花</p>
        <span class="caret"></span>
      </a>
      <ul id="dropdown_menu" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
          <a id="id1" role="menuitem" tabindex="-1" href="javascript: void(0);">保存密码</a>
        </li>
        <li role="presentation">
          <a id="id2" role="menuitem" tabindex="-1" href="javascript: void(0);">退出账号</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- 导航 end -->

<!-- tab -->
<div class="tab_team container">
  <div class="row">

    <ul class="tab_wrap clearfix">
      <li class="tab_choose clearfix" data-target="#basicData" data-toggle="tab">
          <div class="tab_img img_1 pull-left"></div>
          <p class="pull-right">基础数据</p>
      </li>
      <li class="clearfix" data-target="#institutionData" data-toggle="tab">
        <div class="tab_img img_2 pull-left"></div>
        <p class="pull-right">机构数据</p>
      </li>
      <li class="clearfix" data-target="#goodsData" data-toggle="tab">
        <div class="tab_img img_3 pull-left"></div>
        <p class="pull-right">商品数据</p>
      </li>
      <li class="clearfix" data-target="#appData" data-toggle="tab">
        <div class="tab_img img_4 pull-left"></div>
        <p class="pull-right">APP 使用数据</p>
      </li>
    </ul>
  </div>
</div>

<div class="tab-content">
<!-- 基础数据 -->
  <div id="basicData" class="list_main container tab-pane fade in active">
  <div class="list_main_title clearfix">
    <div class="clearfix">
      <div class="about_time pull-left">
        <!-- 能用的到的时间 -->
        <div class="time_group input-append date form-group pull-left" id="start_time" data-date="2012-12" data-date-format="dd-mm-yyyy">
          <input size="16" type="text" class="form-control" value="2012-12" readonly>
            <span class="time_icon add-on">
              <i class="icon-sort"></i>
            </span>
        </div>
        <span class="time_heng pull-left">-</span>
        <!-- 能用的到的时间 -->
        <div class="time_group input-append date form-group pull-left" id="end_time" data-date="2012-12" data-date-format="dd-mm-yyyy">
          <input size="16" type="text" class="form-control" value="2012-12" readonly>
          <span class="time_icon add-on">
            <i class="icon-sort"></i>
          </span>
        </div>
      </div>
      <div class="choose_time pull-left clearfix">
        <p class="pull-left">最近：</p>
        <div class="time_list time_choose pull-left">1个月</div>
        <div class="time_list pull-left">3个月</div>
        <div class="time_list pull-left">全部</div>
      </div>
    </div>
  </div>
  <div class="show_all">
    <div class="list_one row clearfix">
      <div class="list_wrap pull-left">
        <div class="list_bg bg_addServer"></div>
        <div class="list_txt">
          <p class="text_title">324</p>
          <p class="text_centent">新增服务商</p>
        </div>
      </div>
      <div class="list_wrap pull-left">
        <div class="list_bg bg_addMechanism"></div>
        <div class="list_txt">
          <p class="text_title">324</p>
          <p class="text_centent">新增机构</p>
        </div>
      </div>
      <div class="list_wrap pull-left">
        <div class="list_bg bg_addTeacherNum"></div>
        <div class="list_txt">
          <p class="text_title">324</p>
          <p class="text_centent">新增老师数</p>
        </div>
      </div>
      <div class="list_wrap pull-left">
        <div class="list_bg bg_addStudentNum"></div>
        <div class="list_txt">
          <p class="text_title">324</p>
          <p class="text_centent">新增学生数</p>
        </div>
      </div>
    </div>
    <div class="list_one row clearfix">
      <div class="list_wrap pull-left">
        <div class="list_bg bg_sign"></div>
        <div class="list_txt">
          <p class="text_title">324</p>
          <p class="text_centent">签约费用</p>
        </div>
      </div>
      <div class="list_wrap pull-left">
        <div class="list_bg bg_purchaseAmount"></div>
        <div class="list_txt">
          <p class="text_title">324</p>
          <p class="text_centent">进货金额</p>
        </div>
      </div>
      <div class="list_wrap pull-left">
        <div class="list_bg bg_serverBonus"></div>
        <div class="list_txt">
          <p class="text_title">324</p>
          <p class="text_centent">服务商签约奖金</p>
        </div>
      </div>
      <div class="list_wrap pull-left">
        <div class="list_bg bg_serverCommission"></div>
        <div class="list_txt">
          <p class="text_title">324</p>
          <p class="text_centent">服务商进货提成</p>
        </div>
      </div>
    </div>
    <div class="list_two_wrap row clearfix">
      <div class="list_two pull-left">
        <div class="list_bg bg_larg_left"></div>
        <div class="list_txt">
          <p class="text_title">324</p>
          <p class="text_centent">总收入</p>
        </div>
      </div>
      <div class="list_two pull-left">
        <div class="list_bg bg_larg_right"></div>
        <div class="list_txt">
          <p class="text_title">324</p>
          <p class="text_centent">利润</p>
        </div>
      </div>
    </div>
  </div>
</div>

  <!-- 机构数据 -->
  <div id="institutionData" class="list_main container tab-pane fade">
    <!-- 选择 -->
    <div class="clearfix">
        <!-- 区域选择 -->
        <div class="all_choose pull-left">
          <form class="form-inline">
            <div data-toggle="distpicker">
              <div class="position form-group pull-left">
                <label class="sr-only" for="choose_province">Province</label>
                <select class="form-control" id="choose_province"></select>
              </div>
              <div class="position form-group pull-left">
                <label class="sr-only" for="choose_city">City</label>
                <select class="form-control" id="choose_city"></select>
              </div>
            </div>
          </form>
        </div>
        <!-- 下拉选择 -->
        <form  class="form-inline pull-left">
          <div class="form-group">
            <select class="form-control">
              <option>选择购买方案</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </form>
        <form  class="choose_select form-inline pull-left">
          <div class="form-group">
            <select class="form-control">
              <option>选择签约方案</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </form>
      </div>
    <!-- 列表 -->
    <div class="list_neirong clearfix">
      <!-- 左边 -->
      <div class="neirong_left col-md-6">
        <img src="./images/iconAddmechanism.png" alt="">
        <div class="neirong_text">
          <p class="n_t_num">234</p>
          <p class="n_t_tit">新增机构</p>
        </div>
      </div>
      <!-- 右边 -->
      <div class="neirong_right col-md-6">
        <div class="neirong_list clearfix">
          <div class="right_list col-md-6 clearfix">
            <img class="right_img" src="./images/iconAddteacher.png" alt="">
            <div class="neirong_text pull-right">
              <p class="n_t_num">234</p>
              <p class="n_t_tit">新增机构</p>
            </div>
          </div>
          <div class="right_list col-md-6 clearfix">
            <img class="right_img" src="./images/iconAddstudent.png" alt="">
            <div class="neirong_text pull-right">
              <p class="n_t_num">234</p>
              <p class="n_t_tit">新增学生数</p>
            </div>
          </div>
        </div>
        <div class="neirong_list clearfix">
          <div class="right_list col-md-6 clearfix">
            <img class="right_img" src="./images/iconSigningfee.png" alt="">
            <div class="neirong_text pull-right">
              <p class="n_t_num">234</p>
              <p class="n_t_tit">签约费用</p>
            </div>
          </div>
          <div class="right_list col-md-6 clearfix">
            <img class="right_img" src="./images/iconPurchase.png" alt="">
            <div class="neirong_text pull-right">
              <p class="n_t_num">234</p>
              <p class="n_t_tit">进货金额</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 商品数据 -->
  <div id="goodsData" class="list_main container tab-pane fade">

    <div class="goods_choose clearfix">
      <div class="server_check pull-left">
        <div class="about_time pull-left">
          <!-- 能用的到的时间 -->
          <div class="time_group input-append date form-group pull-left" id="start_time"
               data-date="2012-12" data-date-format="dd-mm-yyyy">
            <input size="16" type="text" class="form-control" value="2012-12" readonly>
            <span class="time_icon add-on">
                                <i class="icon-sort"></i>
                            </span>
          </div>
          <span class="time_heng pull-left">-</span>
          <!-- 能用的到的时间 -->
          <div class="time_group input-append date form-group pull-left" id="end_time" data-date="2012-12"
               data-date-format="dd-mm-yyyy">
            <input size="16" type="text" class="form-control" value="2012-12" readonly>
            <span class="time_icon add-on">
                                <i class="icon-sort"></i>
                            </span>
          </div>
        </div>
        <div class="choose_time pull-left clearfix">
          <p class="pull-left">最近：</p>
          <div class="time_list time_choose pull-left">1个月</div>
          <div class="time_list pull-left">3个月</div>
          <div class="time_list pull-left">全部</div>
        </div>
      </div>
      <!-- 选择 -->
      <div class="pull-right clearfix">
        <!-- 区域选择 -->
        <div class="all_choose pull-left">
          <form class="form-inline">
            <div data-toggle="distpicker">
              <div class="position form-group pull-left">
                <label class="sr-only" for="choose_province">Province</label>
                <select class="form-control" id="choose_province"></select>
              </div>
              <div class="position form-group pull-left">
                <label class="sr-only" for="choose_city">City</label>
                <select class="form-control" id="choose_city"></select>
              </div>
            </div>
          </form>
        </div>
        <!-- 下拉选择 -->
        <form  class="form-inline pull-left">
          <div class="form-group">
            <select class="form-control">
              <option>选择购买方案</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </form>
        <form  class="choose_select form-inline pull-left">
          <div class="form-group">
            <select class="form-control">
              <option>选择签约方案</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </form>
      </div>

    </div>

    <div class="goods_list clearfix">
      <div class="goods_detail col-md-4">
        <div class="list_detail col-md-6 text-center">
          <p class="list_num">2133</p>
          <p class="list_tit">学生教材数量</p>
        </div>
        <div class="list_detail col-md-6 text-center">
          <p class="list_num">2133</p>
          <p class="list_tit">学生教材收入</p>
        </div>
      </div>
      <div class="goods_detail col-md-4">
        <div class="list_detail col-md-6 text-center">
          <p class="list_num">2133</p>
          <p class="list_tit">十寸鼓数量</p>
        </div>
        <div class="list_detail col-md-6 text-center">
          <p class="list_num">2133</p>
          <p class="list_tit">十寸鼓收入</p>
        </div>
      </div>
      <div class="goods_detail col-md-4">
        <div class="list_detail col-md-6 text-center">
          <p class="list_num">2133</p>
          <p class="list_tit">老师帐号数量</p>
        </div>
        <div class="list_detail col-md-6 text-center">
          <p class="list_num">2133</p>
          <p class="list_tit">老师帐号收入</p>
        </div>
      </div>
    </div>

  </div>

  <!-- App使用数据 -->
  <div id="appData" class="list_main container tab-pane fade">

    <div class="goods_choose clearfix">
      <!-- 选择 -->
      <div class="col-md-4 clearfix">
        <!-- 下拉选择 -->
        <form  class="form-inline pull-left">
          <div class="form-group">
            <select class="form-control">
              <option>选择购买方案</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </form>
        <form  class="choose_select form-inline pull-left">
          <div class="form-group">
            <select class="form-control">
              <option>选择签约方案</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </form>
      </div>
      <div class="col-md-3 col-md-offset-5">
        <div class="search_txt input-group">
          <input type="text" class="form-control" placeholder="请输入要查询的机构名称">

          <span class="input-group-btn">
            <button class="btn btn-default" type="button">
              <i class="icon icon-search"></i>
            </button>
          </span>
          <!--<span class="input-group-addon">
            <i class="icon icon-search"></i>
          </span>-->
        </div>
      </div>

    </div>

    <div class="list_wrap">
      <div class="app_list clearfix">
        <div class="col-md-13 text-center">
          <p class="app_num">11</p>
          <p class="app_tit">老师数量</p>
        </div>
        <div class="col-md-13 text-center">
          <p class="app_num">11</p>
          <p class="app_tit">老师在线时长（小时）</p>
        </div>
        <div class="col-md-13 text-center">
          <p class="app_num">11</p>
          <p class="app_tit">每位老师平均在线时长</p>
        </div>
        <div class="col-md-13 text-center">
          <p class="app_num">11</p>
          <p class="app_tit">平均每月老师打开次数</p>
        </div>
        <div class="col-md-13 text-center">
          <p class="app_num">11</p>
          <p class="app_tit">平均每月老师在线时长</p>
        </div>
      </div>
      <div class="app_list clearfix">
        <div class="col-md-13 text-center">
          <p class="app_num">11</p>
          <p class="app_tit">学生数量</p>
        </div>
        <div class="col-md-13 text-center">
          <p class="app_num">11</p>
          <p class="app_tit">学生在线时长（小时）</p>
        </div>
        <div class="col-md-13 text-center">
          <p class="app_num">11</p>
          <p class="app_tit">每位学生平均在线时长</p>
        </div>
        <div class="col-md-13 text-center">
          <p class="app_num">11</p>
          <p class="app_tit">平均每月学生打开次数</p>
        </div>
        <div class="col-md-13 text-center">
          <p class="app_num">11</p>
          <p class="app_tit">平均每月学生在线时长</p>
        </div>
      </div>
    </div>

    <div class="student_data">
      <h1>各板块学生数据</h1>

      <div class="goods_list clearfix">
        <div class="goods_detail col-md-4">
          <div class="list_detail col-md-6 text-center">
            <p class="list_num">2133</p>
            <p class="list_tit">学生教材数量</p>
          </div>
          <div class="list_detail col-md-6 text-center">
            <p class="list_num">2133</p>
            <p class="list_tit">学生教材收入</p>
          </div>
        </div>
        <div class="goods_detail col-md-4">
          <div class="list_detail col-md-6 text-center">
            <p class="list_num">2133</p>
            <p class="list_tit">十寸鼓数量</p>
          </div>
          <div class="list_detail col-md-6 text-center">
            <p class="list_num">2133</p>
            <p class="list_tit">十寸鼓收入</p>
          </div>
        </div>
        <div class="goods_detail col-md-4">
          <div class="list_detail col-md-6 text-center">
            <p class="list_num">2133</p>
            <p class="list_tit">老师帐号数量</p>
          </div>
          <div class="list_detail col-md-6 text-center">
            <p class="list_num">2133</p>
            <p class="list_tit">老师帐号收入</p>
          </div>
        </div>
      </div>
    </div>


  </div>


</div>


<script src="./javascripts/jquery-1.9.1.min.js"></script>
<script src="./javascripts/bootstrap.min.js"></script>
<script src="./javascripts/distpicker.data.min.js"></script>
<script src="./javascripts/distpicker.min.js"></script>
<script src="./javascripts/bootstrap-datetimepicker.min.js"></script>
<script src="./javascripts/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
  $(function () {
    // 导航选项 点击
    $(".nav_show>li a").click(function () {
      console.log($(this).index());
      $(this).addClass('nav_choose')
        .parent("li").siblings().find("a")
        .removeClass('nav_choose');
    })
    // try
    $("#id1").click(function(){
      console.log("id1---")
    })
    $("#id2").click(function () {
      console.log("id1--111-")
    })

    // 开始时间
    $('#start_time').datetimepicker({
      // 选中月份
      format: 'yyyy-mm',
      weekStart: 1,
      autoclose: true,
      startView: 3,
      minView: 3,
      forceParse: false,
      language: 'zh-CN'
    });
    // 结束时间
    $('#end_time').datetimepicker({
      // 选中月份
      format: 'yyyy-mm',
      weekStart: 1,
      autoclose: true,
      startView: 3,
      minView: 3,
      forceParse: false,
      language: 'zh-CN'
    });

    // 时间选择
    $("div.time_list").click(function(){
      $(this).addClass('time_choose').siblings().removeClass('time_choose');
    })

    // tab_wrap 选项卡
    $(".tab_wrap li").click(function(){
      $(this).addClass("tab_choose").siblings().removeClass("tab_choose");
    })
  })
</script>
</body>

</html>